<script setup>
import { ref, onMounted } from "vue";

import { useProcessStoreHook } from "@renderer/store/modules/process";
import { useScrollBarDragger } from "@renderer/utils/dragger";

import useLoading from "../../utils/loading";

const processStore = useProcessStoreHook();

const step = ref(0);

// 设定选择框高度，为最大高度
const selectBoxHeight = ref(0);
onMounted(() => {
  selectBoxHeight.value = window.innerHeight - 70 - 60 - 73;
  addEventListener("resize", () => (selectBoxHeight.value = window.innerHeight - 70 - 60 - 73));
});

// 设置滚动条方法
const selectScrollRef = ref(null);
const selectDragger = useScrollBarDragger(selectScrollRef);

// 步骤回退到第 index 步
function selectBack(index) {
  if (index < step.value) step.value = index;
}

// 加工中心选择页面是否显示
const visible = ref(false);
// 用户点击选择加工中心时触发
async function selectWorkCenterClick() {
  const loading = useLoading();
  const res = await processStore.getWorkCenterOptions();
  if (res.code === 0) {
    step.value = 0;
    visible.value = true;
  } else {
    console.log(res.data);
    ElMessage.error(res.msg);
  }
  loading.close();
}

// 选择作业单元
function selectWorkSite(workSiteId) {
  step.value = 1;
  processStore.workSiteId = workSiteId;
}

// 选择加工中心类型
function selectCenterType(workCenterType) {
  step.value = 2;
  processStore.workCenterType = workCenterType;
  processStore.partType = workCenterType;
}

// 选择加工中心
function selectWorkCenter(workCenterId, workCenterDesc) {
  visible.value = false;
  processStore.setWorkCenter(workCenterId, workCenterDesc);
}
</script>

<template>
  <el-input
    v-model="processStore.workCenterDesc"
    placeholder="点击选择产线"
    readonly
    @click="selectWorkCenterClick"
  />
  <el-dialog v-model="visible" fullscreen title="请选择">
    <el-steps :active="step" align-center>
      <el-step title="厂区" @click="selectBack(0)" />
      <el-step title="产线类型" @click="selectBack(1)" />
      <el-step title="产线" />
    </el-steps>
    <el-scrollbar
      ref="selectScrollRef"
      class="select-box"
      :height="selectBoxHeight - 57 + 'px'"
      @mousedown="selectDragger.mouseDownHandler"
      @mouseup="selectDragger.mouseUpHandler"
      @mousemove="selectDragger.mouseMoveHandler"
      @mouseleave="selectDragger.mouseUpHandler"
    >
      <el-space v-if="step === 0" class="select-space" direction="vertical">
        <el-button
          v-for="item in processStore.workSites"
          :key="item.WorkSiteID"
          class="select-btn"
          size="large"
          @click="selectWorkSite(item.WorkSiteID)"
          >{{ item.WorkSiteDescription }}</el-button
        >
      </el-space>
      <el-space v-else-if="step === 1" class="select-space" direction="vertical">
        <el-button
          v-for="item in processStore.workCenterTypes"
          :key="item.WorkCenterType"
          class="select-btn"
          size="large"
          @click="selectCenterType(item.WorkCenterType)"
          >{{ item.WorkCenterType }}</el-button
        >
      </el-space>
      <el-space v-else-if="step === 2" class="select-space" direction="vertical">
        <el-button
          v-for="item in processStore.workCenterIds"
          :key="item.WorkCenterID"
          class="select-btn"
          size="large"
          @click="selectWorkCenter(item.WorkCenterID, item.Description)"
          >{{ item.Description }}</el-button
        >
      </el-space>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped lang="scss">
.select-box {
  margin: 24px 0 0 0;
  .select-space {
    width: 100%;
  }
}
.select-btn {
  width: 100% !important;
  height: 56px !important;
}
:deep(.el-space__item) {
  width: 100%;
}
</style>
